<template>
	<view class="activity-container">
		<!-- 标题 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#333" size="50"></u-icon>
			<text>活动强度指数</text>
		</view>
		<view class="header-bar-switch">
			<view class="date-switch">
				<view class="list" v-for='(item,idx) in dayWeek' :key='item.id' @click="toggleBar(item)"
					:class="selectedBarId===item.id?'active-list' : 'unactive-list'">
					{{item.name}}
				</view>
			</view>
			<view class="dater">
				< {{selectedBarId===0?today:'本周'}}>
			</view>
		</view>


		<view class="sports-info-content" v-if='selectedBarId===1'>
			<view class="info-title">
				<view class="">
					本周总运动1小时30分
				</view>
				<view class="">
					距目标还差0小时40分钟
				</view>
			</view>
			<view class="color-charts-content">
				<view class="color-list" v-for="(item,idx) in activityList" :key='item.id'
					:style='{width:item.percent,background:item.color}'>

				</view>
			</view>
			<view class="sports-type-content">
				<view class="list" v-for='(item,idx) in activityList' :key='item.id'>
					<view class="bg-title">
						<view class="bg" :style="{backgroundColor: item.color}">

						</view>
						<view class="title">
							{{item.title}}
						</view>
					</view>
					<view class="timer">
						{{item.timer}}
					</view>

				</view>

			</view>
		</view>
		<view class="chart-container" v-if='selectedBarId===0'>
			<view class="echarts-wrap" style="width:100%;height:680rpx;padding-bottom: 40rpx;">
				<uni-ec-canvas class="uni-ec-canvas" id="line-chart2" ref="canvas2"
					v-on:handle-change='handleLegendChange' canvas-id="lazy-load-chart" :ec="ec2">
				</uni-ec-canvas>

			</view>
	
		
			</view>
	

		<view class="chart-container" v-else>
			<view class="echarts-wrap" style="width:100%;height:580rpx">
				<uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvas"
					v-on:handle-change='handleLegendChange' canvas-id="lazy-load-chart" :ec="ec">
				</uni-ec-canvas>

			</view>
		</view>
		<view class=""  v-if='selectedBarId===0'> 

			<view class="Statistics">
				<view class="echarts-wrap" style="width:100%;height:580rpx" >
					<uni-ec-canvas class="uni-ec-canvas" id="line-chart3" ref="canvas3"
						v-on:handle-change='handleLegendChange' canvas-id="lazy-load-chart" :ec="ec3">
					</uni-ec-canvas>
				</view>
				<view class="john_chart_title">
					<view class="item" style="display: flex;">
						<view style="color:#2397ee;font-size: 10px;">.........................</view>
						<view class="hr2" style="margin-left:4rpx">低温预警线</view>
					</view>
					<view class="item" style="display: flex;">
						<view style="color:#D41F2D;font-size: 10px;">.........................</view>
						<view class="hr4 color12" style="margin-left:4rpx;">高温预警线</view>
					</view>
				</view>
			</view>
			<view class="echarts-wrap" style="width:100%;height:420rpx;margin-top:-50rpx" >
				<uni-ec-canvas class="uni-ec-canvas" id="line-chart4" ref="canvas4" v-on:handle-change='handleLegendChange'
					canvas-id="lazy-load-chart" :ec="ec4">
				</uni-ec-canvas>
			
			
			</view>
			<view class="john_chart_title" style="margin-top:112rpx">
			
				<view class="item" style="display: flex;width:100%;justify-content: center;">
					<view style="color:#D41F2D;font-size: 10px;">.........................</view>
					<view class="hr4 color12" style="margin-left:4rpx;">湿度预警线</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'
	import * as echarts from '@/components/uni-ec-canvas/echarts.min.js'
	export default {
		components: {
			uniEcCanvas,

		},
		data() {
			return {
				dayWeek: [{
					id: 0,
					name: '日'
				}, {
					id: 1,
					name: '周'
				}],
				ec: {
					lazyLoad: true,
					option: {
						// title: {
						// 	text: '活动量',
						// 	textStyle: {
						// 		color: "#666",
						// 		fontSize: 15,
						// 		fontWeight: 'normal'
						// 	},
						// 	padding: [5, 0, 0, 0]
						// },
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						grid: {
							top: 40,
							right: 20,
							left: 20,
							bottom: 20,
							containLabel: true
						},
						xAxis: [{
							type: 'category',
							data: ['5/5', '5/6', '5/7', '5/8', '5/9', '5/10', '5/11'],
							axisLine: {
								lineStyle: {
									color: '#7e9fb6'
								}
							},
							axisLabel: {
								margin: 10,
								color: '#7e9fb6',
								textStyle: {
									fontSize: 12
								},
							},
						}],
						yAxis: [{
							name: '时长（分）',
							axisLabel: {
								color: '#7e9fb6',
							},
							axisLine: {
								show: false,
								lineStyle: {
									color: '#7e9fb6'
								}
							},
							splitLine: {
								lineStyle: {
									color: 'rgba(126,159,182,0.12)',
									type: [5, 8],
									dashOffset: 3
								}
							}
						}],
						color: ['#4CD964', 'green', 'yellow', 'orange', 'red'],
						series: [{
								name: '轻活动',
								type: 'bar',
								barWidth: 24,
								stack: 'total',
								data: [20, 25, 30, 26, 22, 38, 35]
							},
							{
								name: '低强度',
								type: 'bar',
								barWidth: 24,
								stack: 'total',
								data: [0, 20, 0, 26, 32, 0, 28]
							},
							{
								name: '中强度',
								type: 'bar',
								barWidth: 24,
								stack: 'total',
								data: [50, 42, 78, 3, 4, 5, 0]
							},
							{
								name: '高强度',
								type: 'bar',
								barWidth: 24,
								stack: 'total',
								data: [0, 30, 0, 10, 0, 48, 54]
							},
							{
								name: '剧烈动',
								type: 'bar',
								barWidth: 24,
								stack: 'total',
								data: [39, 0, 0, 0, 0, 60, 0]
							},

						]
					}


				},
				ec2: {
					lazyLoad: true,
					option: {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								crossStyle: {
									color: 'black',
								},
								lineStyle: {
									color: '#666',
								},
							},
						},
						grid: {
							top: '10%',
							bottom: '20%',
							left:'14%',
							borderWidth: 0,
						},
						xAxis: [{
							type: 'category',
							boundaryGap: 0,
							data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00',
								'10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
								'18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00',
							],
							splitLine: {
								show: false,
							},
						}, {
							type: 'value',
							gridIndex: 0,
							axisLabel: {
								show: false,
							},
							splitLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
						}],
						yAxis: [{
							interval: 15,
							show: false,
							min: 0,
							max: 50,
							position: 'right',
							splitLine: {
								show: false,
							},
							axisLabel: {
								show: true,
							},
						}, {
							type: 'category',
							position: 'left',
							axisLabel: {
								show: true,
							},
							splitLine: {
								show: false,
							},
							data: ['轻活动', '低强度', '中强度', '高强度', '剧烈动'],
						}],
						series: [{
							type: 'line',
							smooth: false,
							xAxisIndex: 1,
							yAxisIndex: 0,
						}, {
							type: 'line',
							name: '轻活动',
							symbol: 'none',
							z: 5,
							lineStyle: {
								normal: {
									width: 0,
									opacity: 0,
								},
							},
							areaStyle: {
								normal: {
									color: '#4CD964',
								},
							},
							data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10,
								10, 10, 10, 10
							],
						}, {
							type: 'line',
							name: '低强度',
							symbol: 'none',
							z: 4,
							lineStyle: {
								normal: {
									width: 0,
									opacity: 0,
								},
							},
							areaStyle: {
								normal: {
									color: 'green',
								},
							},
							data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20,
								20, 20, 20, 20
							],
						}, {
							type: 'line',
							name: '中强度',
							symbol: 'none',
							z: 3,
							lineStyle: {
								normal: {
									width: 0,
									opacity: 0,
								},
							},
							areaStyle: {
								normal: {
									color: 'yellow',
								},
							},
							data: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
								30, 30, 30, 30
							],
						}, {
							type: 'line',
							name: '高强度',
							symbol: 'none',
							z: 2,
							lineStyle: {
								normal: {
									width: 0,
									opacity: 0,
								},
							},
							areaStyle: {
								normal: {
									color: 'orange',
								},
							},
							data: [40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40,
								40, 40, 40, 40
							],
						}, {
							type: 'line',
							name: '剧烈动',
							symbol: 'none',
							z: 1,
							lineStyle: {
								normal: {
									width: 0,
									opacity: 0,
								},
							},
							areaStyle: {
								normal: {
									color: '#ee1a0b',
								},
							},
							data: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50,
								50, 50, 50, 50
							],
						}, {
							name: '活动量',
							type: 'line',
							symbol: 'none',
							step: 'start',
							z: 10,
							itemStyle: {
								normal: {
									color: '#4457b6',
								},
							},
							lineStyle: {
								normal: {
									width: 3,
								},
							},
							label: {
								normal: {
									show: true,
								},
							},
							data: [5, 5, 5, 5, 5, 5, 5, 15, 15, 15, 15, 45, 45, 45, 45, 25, 25, 25, 25, 15, 15, 15,
								5, 5
							],
						}]
					}

				},
				ec3: {
						lazyLoad: true,
						option: {
							title: [], //
							// legend: {
							// 	data: ['温度', '湿度'],
							// 	selected: {
							// 		'温度': true,
							// 		'湿度': false
							// 	}
				
							// },
							grid: {
								top: 30,
								bottom: 106
							},
							tooltip: {
								trigger: 'axis',
								formatter: function(params) {
									// params = params[0];
									// var date = new Date(params.name);
									// var hour = date.getHours();
									// var minutes = date.getMinutes();
									// if (hour < 10) {
									// 	hour = '0' + hour;
									// }
									// if (minutes < 10) {
									// 	minutes = '0' + minutes;
									// }
									// var dateStr = hour + ':' + minutes;
									// return dateStr + ' ' + params.value[1];
								},
								axisPointer: {
									animation: false
								}
							},
							xAxis: {
								type: 'time',
								splitLine: {
									show: false
								},
								splitNumber: 8,
								axisLine: {
									lineStyle: {
										color: '#1B2232'
									}
								},
								axisLabel: {
									formatter: function(value, index) {
										console.log(value, index, 11)
										var date = new Date(value);
										var hour = date.getHours();
										var minutes = date.getMinutes();
										if (hour < 10) {
											hour = '0' + hour;
										}
										if (minutes < 10) {
											minutes = '0' + minutes;
										}
										return ':'
									},
									interval: 3,
									rotate: 60
				
								}
							},
							yAxis: {
								name: '宝宝体表湿度变化及异常',
								nameTextStyle: {
									color: '#1B2232',
									fontSize: 15,
									padding: [0, 0, 0, 150]
								},
								type: 'value',
								min: 20,
								max: 100,
								boundaryGap: [0, '100%'],
								splitLine: {
									show: false
								},
								axisLine: {
									lineStyle: {
										color: '#1B2232'
									}
								},
								axisLabel: {
									formatter: '{value}'
								}
							},
				
							series: [{
								name: '湿度',
								center: ['30%', '54%'],
								type: 'line',
								smooth: true,
								symbol: 'circle',
								symbolSize: 5,
								showSymbol: false,
								lineStyle: {
									normal: {
										width: 1
									}
								},
								markLine: {
									silent: true,
									data: [{
										yAxis: 75,
										lineStyle: {
											color: "#D41F2D"
										}
									}],
									lineStyle: {
										normal: {
											type: 'dotted',
										},
									},
								},
								areaStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgba(137, 189, 27, 0.3)'
										}, {
											offset: 0.8,
											color: 'rgba(137, 189, 27, 0)'
										}], false),
										shadowColor: 'rgba(0, 0, 0, 0.1)',
										shadowBlur: 10
									}
								},
								itemStyle: {
									normal: {
										color: 'rgb(137,189,27)',
										borderColor: 'rgba(137,189,2,0.27)',
										borderWidth: 12
				
									}
								},
								data: []
							}]
						}
				
					},
					ec4: {
						lazyLoad: true,
						option: {
							title: [], //
							// legend: {
							// 	data: ['温度', '湿度'],
							// 	selected: {
							// 		'温度': true,
							// 		'湿度': false
							// 	}
				
							// },
							grid: {
								top: 30,
								bottom: 80
							},
							tooltip: {
								trigger: 'axis',
								formatter: function(params) {
									// params = params[0];
									// var date = new Date(params.name);
									// var hour = date.getHours();
									// var minutes = date.getMinutes();
									// if (hour < 10) {
									// 	hour = '0' + hour;
									// }
									// if (minutes < 10) {
									// 	minutes = '0' + minutes;
									// }
									// var dateStr = hour + ':' + minutes;
									// return dateStr + ' ' + params.value[1];
								},
								axisPointer: {
									animation: false
								}
							},
							xAxis: {
								type: 'time',
								splitLine: {
									show: false
								},
								splitNumber: 8,
								axisLine: {
									lineStyle: {
										color: '#1B2232'
									}
								},
								axisLabel: {
									formatter: function(value, index) {
										console.log(value, index, 11)
										var date = new Date(value);
										var hour = date.getHours();
										var minutes = date.getMinutes();
										if (hour < 10) {
											hour = '0' + hour;
										}
										if (minutes < 10) {
											minutes = '0' + minutes;
										}
										return ':'
									},
									interval: 3,
									rotate: 60
				
								}
							},
							yAxis: {
								name: '宝宝体表温度变化及异常',
								nameTextStyle: {
									color: '#1B2232',
									fontSize: 15,
									padding: [0, 0, 0, 150]
								},
								type: 'value',
								min: 20,
								max: 40,
								boundaryGap: [0, '100%'],
								splitLine: {
									show: false
								},
								axisLine: {
									lineStyle: {
										color: '#1B2232'
									}
								},
								axisLabel: {
									formatter: '{value}'
								}
							},
				
							series: [{
									name: '温度',
									type: 'line',
									hoverAnimation: false,
									smooth: true,
									symbolSize: 0,
									data: [],
									markLine: {
										silent: true,
										data: [{
											yAxis: 31,
											lineStyle: {
												color: '#2397ee'
											}
										}, {
											yAxis: 37,
											lineStyle: {
												color: "#D41F2D"
											}
										}],
										lineStyle: {
											normal: {
												type: 'dotted',
											},
										},
									},
									markArea: {
										// data: [
										// [{
										// 	name: '咳嗽',
										// 	x: '16%'
										// }, {
										// 	x: '25%'
										// }],
										// [{
										// 	name: '发烧',
										// 	x: '30%'
										// }, {
										// 	x: '40%'
										// },
										// ],
										// ]
									}
				
								},
				
							]
						}
				
					},
				
				
				selectedBarId: 0,
				today: '',
				activityList: [{
					id: 0,
					color: '#4CD964',
					title: '轻活动（慢走）',
					timer: '0小时30分',
					percent: '15%'
				}, {
					id: 1,
					color: 'green',
					title: '低强度（慢走）',
					timer: '0小时0分',
					percent: '0%'
				}, {
					id: 2,
					color: 'yellow',
					title: '中强度（慢走）',
					timer: '0小时40分',
					percent: '20%'
				}, {
					id: 3,
					color: 'orange',
					title: '高强度（慢走）',
					timer: '1小时0分',
					percent: '30%'
				}, {
					id: 4,
					color: 'red',
					title: '剧烈动（慢走）',
					timer: '1小时10分',
					percent: '35%'
				}],
			}
		},
		onReady() {
			setTimeout(() => {
				console.log(this)
				console.log(this.$refs)
				// this.$refs['canvas'].init()
				this.$refs['canvas2'].init()
					this.$refs['canvas3'].init()
						this.$refs['canvas4'].init()
				console.log('延迟加载了')

			}, 1000) // 两秒之后延迟加载  


		},
		onLoad(options) {
			this.getTimer()
		},
		methods: {
			getTimer() {
				var myDate = new Date();
				var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
				var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
				var myToday = myDate.getDate(); //获取当前日(1-31)
				var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
				var myHour = myDate.getHours(); //获取当前小时数(0-23)
				var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
				var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
				if (myHour < 10) {
					myHour = `0${myHour}`
				}

				if (myMinute < 10) {
					myMinute = `0${myMinute}`
				}
				this.today = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate()

			},
			toggleBar(item) {
				this.selectedBarId = item.id
				if(item.id===1){
					setTimeout(() => {
				
						this.$refs['canvas'].init()
						console.log('延迟加载了')
					
					}, 1000) 
				}else{
					setTimeout(() => {	
						this.$refs['canvas2'].init()
						this.$refs['canvas3'].init()
							this.$refs['canvas4'].init()
						console.log('延迟加载了')
					
					}, 1000) 
				}
			},
			navigateBack() {
				uni.switchTab({
					url: '../index'
				})
			}
		}
	}
</script>

<style scoped lang='scss'>
	.navbar {
		margin-top: 90rpx;
		margin-bottom: 20rpx;
		width: 750rpx;
	}

	.navbar>text {
		font-size: 36rpx;
		font-weight: bold;
		padding-left: 220rpx;
	}

	.icon-left {
		margin-top: 20rpx;
		margin-left: 10rpx;
	}

	.activity-container {
		width: 100%;
		height: 100%;
		background-color: #F1F1F1;

		.chart-container {
			margin-top: 26rpx;
			background-color: #fff;
			width: 100%;

		}

		.header-bar-switch {
			width: 100%;
			padding: 20rpx 28rpx 10rpx 28rpx;
			box-sizing: border-box;

			.date-switch {
				width: 100%;
				display: flex;
				border-radius: 60rpx;
				height: 60rpx;
				/* border:1px solid #f1f1f1; */
				background-color: #4457b6;

				.list {
					width: 50%;
					display: flex;
					align-items: center;
					font-size: 15px;
					justify-content: center;
				}

				.active-list {
					/* 	border-top-right-radius: 20rpx;
				border-bottom-right-radius: 20rpx; */
					border-radius: 60rpx;
					background-color: #fff !important;

				}

				.unactive-list {
					color: #fff;

				}
			}

			.dater {
				width: 100%;
				padding: 20rpx 150rpx;
				color: #4457b6;
				font-size: 13px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.sports-info-content {
			width: 100%;
			height: 600rpx;
			border-radius: 5rpx;
			background: #fff;
			padding: 28rpx 52rpx;
			box-sizing: border-box;
			margin-top: 0rpx;

			.info-title {
				font-size: 17px;
				color: #333;
			}

			.color-charts-content {
				width: 100%;
				border-radius: 20rpx !important;
				overflow: hidden;
				display: flex;
				margin-top: 26rpx;

				.color-list {
					height: 65rpx;
				}
			}

			.sports-type-content {
				width: 100%;
				margin-top: 14rpx;

				.list {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 30rpx;

					.bg-title {
						display: flex;
						align-items: center;

						.bg {
							width: 26rpx;
							height: 26rpx;
							background-color: yellow;
						}

						.title {
							color: #999;
							margin-left: 16rpx;
						}
					}

					.timer {
						color: #999;
					}
				}
			}

		}

	}
	.mask-more {
		position: fixed;
		z-index: 166;
		margin: 15rpx 15rpx;
		padding: 15rpx 30rpx;
		box-sizing: border-box;
		bottom: 30rpx;
		background: #F6F7FB;
		border-radius: 6rpx;
		height: 766rpx;
		width: 100%;
	}
	
	.Tips {
		display: flex;
		margin: 20rpx;
		margin-top: 50rpx;
	}
	
	.Tips>view {
		height: 250rpx;
		background-color: #F6F7FB;
		border-radius: 30rpx;
	
		box-shadow: 1px 1px 2px rgb(228, 227, 227), 0 0 5px rgb(228, 227, 227), 0 0 1px rgb(228, 227, 227);
	}
	
	// 温馨提示
	.tips_join {
		flex: 1;
		padding: 20rpx;
	}
	
	.tips_join>image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.tips_join>view {
		// margin-top: 10rpx;
		text-align: center;
		font-size: 16px;
		color: #253DC2;
	}
	
	.tips_join>text {
		font-size: 16px;
		font-weight: bold;
		margin-left: 10rpx;
		color: #FF5310;
	}
	
	.uni-ec-canvas {
		width: 100%;
		height: 100%;
		display: block;
	}
	
	.history-data {
		overflow: hidden;
	}
	
	.mask {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 0 16rpx;
		position: absolute;
		box-sizing: border-box;
		z-index: 3333;
	
		.content {
			height: 680rpx;
			width: 100%;
			border-radius: 8rpx;
			background-color: #fff;
			margin-top: 35%;
	
			.header {
				width: 100%;
				height: 80rpx;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
				font-size: 18px;
				font-weight: bold;
				background: #3370ff;
				border-top-left-radius: 8rpx;
				border-top-right-radius: 8rpx;
			}
	
			.content-main {
				width: 100%;
				padding: 18rpx;
				box-sizing: border-box;
	
				.symptom-content {
					width: 100%;
	
					.symptom-top {
						color: #3370ff;
						border-left: 5px solid #007AFF;
						padding-left: 10rpx;
					}
	
					.list-content {
						display: flex;
						width: 100%;
						flex-wrap: wrap;
	
						.list {
							min-width: 80rpx;
							margin: 12rpx 28rpx;
							padding: 3px 22rpx;
							box-sizing: border-box;
							background: #f1f1f1;
							border-radius: 6rpx;
	
							&.active-list {
								background: #3370ff !important;
								color: #fff !important;
							}
						}
	
					}
	
					.btn-container {
						width: 100%;
						padding: 60rpx 20%;
						box-sizing: border-box;
	
						.cancel-btn {
							width: 100%;
							text-align: center;
							line-height: 58rpx;
							height: 58rpx;
							border: 1rpx solid #999;
							border-radius: 8rpx;
						}
	
						.confirm-btn {
							margin-top: 30rpx;
							width: 100%;
							text-align: center;
							line-height: 58rpx;
							height: 58rpx;
							color: #fff;
							background: #3370ff;
							border-radius: 8rpx;
						}
					}
				}
			}
		}
	}
	
	.navbar {
		margin-top: 90rpx;
		margin-bottom: 20rpx;
		width: 750rpx;
	}
	
	.navbar>text {
		font-size: 36rpx;
		font-weight: bold;
		padding-left: 220rpx;
	}
	
	.icon-left {
		margin-top: 20rpx;
		margin-left: 10rpx;
	}
	
	// 日历
	.calendar {
		background-color: rgb(241, 241, 241);
		position: relative;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;
		border-radius: 50rpx;
	}
	
	// 统计
	.Statistics {
		height: 680rpx;
	}
	
	// 提醒
	
	.remind {
		padding: 30rpx;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		height: 600rpx;
		background-color: rgb(68, 92, 223);
	}
	
	.one {
		background-color: #fff;
		border-radius: 50rpx;
		margin-top: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 60rpx;
		color: rgb(45, 71, 203);
		font-size: 36rpx;
		font-family: STSong;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 60rpx;
	}
	
	.one>image {
		width: 40rpx;
		height: 40rpx;
		float: right;
		padding-right: 100rpx;
		padding-top: 30rpx;
	}
	
	.uni-ec-canvas {
		margin-top: 22rpx;
		width: 100%;
		height: 640rpx;
		display: block;
	}
	
	.john_chart_title {
		display: flex;
		padding-left: 8%;
		padding-right: 8%;
		color: #666;
		font-size: 28rpx;
	
		.item {
			// line-height: 64rpx;
			flex: 1;
			text-align: right;
			position: relative;
	
			&:first-child {
				margin-right: 10%;
			}
		}
	
		.hr {
			border-top: 1rpx dashed #D41F2D;
			width: 120rpx;
			display: inline-block;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
	
			&.color1 {
				border-top-color: #D41F2D;
			}
		}
	}
</style>
